<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no">
        <meta name="format-detection" content="telephone=no">
		<title>Insert title here</title>
		<link rel="stylesheet" href="${pageContext.request.contextPath }/resource/css/frozen.css">
        <script src="${pageContext.request.contextPath }/resource/js/lib/zeptojs/zepto.min.js"></script>
        <script src="${pageContext.request.contextPath }/resource/js/frozen.js"></script>
        <script src="${pageContext.request.contextPath }/resource/js/template.js"></script>
	</head>
<body>
	<ul class="ui-list ui-list-link ui-border-tb" id="list_box">
		<li id="bottom"></li>
	</ul>
	<div class="ui-loading-wrap">
		<p>加载中</p>
		<i class="ui-loading"></i>
	</div>
	
	<script id="subjects" type="text/html">
		{{each data}}
			<li class="ui-border-t">
				<a href="${pageContext.request.contextPath }/subject/detail/{{$value.id}}">
				<div class="ui-list-img">
					<span style="background-image: url({{$value.icon}})"></span>
				</div>
				<div class="ui-list-info">
					<h4 class="ui-nowrap">{{$value.title}}</h4>
					<p class="ui-nowrap">{{$value.content}}</p>
				</div>
				</a>
			</li>
		{{/each}}
	</script>
	<script type="text/javascript">
		$(function(){
			$.ajax({
			   type: "POST",
			   dataType: "json",
			   url: "${pageContext.request.contextPath }/subject/list/data",
			   //data: "name=John&location=Boston",
			   success: function(body){
				   var html = template('subjects', body);
				   $("#list_box").html(html);
			   }
			});
		});
	</script>
</body>
</html>